<script setup>
import {ref} from "vue";
import instance from "@/utils/request.js";
import {baseURL} from "@/utils/request.js";
import {useUserStore} from "@/store/modules/student/index.js";
import {onMounted} from "vue";
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const userStore = useUserStore()
const formData = [
  { courseName: '高等数学', courseCredit: '3.0', teacherName: '王老师', grade: '90' },
  { courseName: '线性代数', courseCredit: '2.5', teacherName: '李老师', grade: '85' },
  { courseName: '大学英语', courseCredit: '4.0', teacherName: '张老师', grade: '88' },
  { courseName: '数据结构', courseCredit: '3.5', teacherName: '赵老师', grade: '92' },
  { courseName: '操作系统原理', courseCredit: '3.0', teacherName: '孙老师', grade: '78' },
  { courseName: '计算机网络', courseCredit: '3.0', teacherName: '周老师', grade: '80' },
  { courseName: '软件工程', courseCredit: '2.5', teacherName: '吴老师', grade: '87' },
  { courseName: '编译原理', courseCredit: '3.0', teacherName: '郑老师', grade: '95' },
  { courseName: '数据库原理', courseCredit: '3.5', teacherName: '王老师', grade: '89' },
  { courseName: '人工智能导论', courseCredit: '3.0', teacherName: '李老师', grade: '93' }
];

const queryString = ref({
  //课程名
  courseName: '',
  //排序条件
  sortBy: null,
  //升序或降序
  //0降序 1升序
  ascendOrNot: null,
})
const pagination = ref({
  currentPage: 1,
  pageSize: 6,
  total: 0
})

//通过生命周期函数在vue对象创建时获取成绩信息
onMounted(() => {
  findPage()
})

//获取课程信息
const findPage = () => {

  const param = {
    "studentId": userStore.userInfo.userName,
    "courseName": queryString.value.courseName,
    "ascendingOrNot": queryString.value.ascendOrNot,
    "sortBy": queryString.value.sortBy,
    "currentPage": pagination.value.currentPage,
    "pageSize": pagination.value.pageSize
  }

  instance.post(baseURL + "/student/findPage", param).then(res => {
    formData.value = res.data.data.list
    pagination.value.total = res.data.data.totals
  }).catch((e) => {
    console.log(e)
  })
}
const handleCurrentChange = (currentPage) => {
  pagination.value.currentPage = currentPage;
  findPage();
}

const handleQuery = () => {
  try {
    handleCurrentChange(1)
    ElMessage.success('查询成功')
  }catch (e) {
    ElMessage.error('查询失败')
    console.log(e)
  }

}
</script>

<template>
  <div class="content-header">
    <el-input v-model="queryString.courseName" placeholder="请输入课程名称" clearable class="input-wrapper">
      <template #prefix>
        <el-icon>
          <Search/>
        </el-icon>
      </template>
    </el-input>
    <el-select v-model="queryString.sortBy" clearable placeholder="选择排序类型" class="select-wrapper" size="large">
      <el-option label="学分" value="course_credit"/>
    </el-select>
    <el-select v-model="queryString.ascendOrNot" clearable placeholder="选择升序或降序" class="select-wrapper" size="large">
      <el-option label="升序" value="asc"/>
      <el-option label="降序" value="desc"/>
    </el-select>
    <el-button type="primary" @click="handleQuery" style="height: 50px;margin: 5px 0 0 10px" >
      确定
    </el-button>
  </div>

  <div class="content-table">
    <el-table :data="formData" class="test">
      <el-table-column prop="courseName" label="课程名称" width="150px"/>
      <el-table-column prop="courseCredit" label="学分" width="150px"/>
      <el-table-column prop="teacherName" label="授课老师" width="120px"/>
      <el-table-column prop="grade" label="课程成绩" width="120px"/>

    </el-table>
    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination background
                     @current-change="handleCurrentChange"
                     v-model:current-page="pagination.currentPage"
                     v-model:page-size="pagination.pageSize"
                     :total="pagination.total"
                     layout="total, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>
<style scoped>
.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.input-wrapper {
  flex: 1;
  margin-right: 10px;
}

.select-wrapper {
  width: 150px;
  margin-right: 10px;
}

.content-table {
  margin: 10px;
  border-collapse: collapse;
}

.el-table {
  width: 100%;
  border: 1px solid #e0e0e0;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  background-color: #f5f5f5;
  border-top: 1px solid #e0e0e0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-header,
  .pagination-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .input-wrapper,
  .select-wrapper {
    width: 100%;
    margin-bottom: 10px;
  }

  .el-table {
    display: block;
    overflow-x: auto;
  }
}
</style>